<template>
	<view class="page">
		<view class="search">
			<image class="ic_search" src="/static/images/write/ic_search.png"></image>
			<input type="text" :value="keyword" @input="keywordInputChange" placeholder="输入关键词搜索" maxlength="30" placeholder-style="color: #acb2b2;" confirm-type="search" @confirm="doSearch"></input>
			<view class="ic_clear" v-if="keyword" @click="clearKeyword"><image src="/static/images/write/ic_clear.png"></image></view>
		</view>
		
		<view v-if="isSearch">
			<uv-tabs class="tabs" :list="searchTabs" :current="0" key-name="title" line-color="#04BABE" :activeStyle="{ color: '#1b1b1b', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{ color: '#1b1c1c', fontSize: '14px'}"></uv-tabs>
			<promptList class="lists" ref="search" topic-id="all" :topic-index="0" :active-topic-index="0"></promptList>
		</view>
		<view v-else>
			<uv-tabs class="tabs" :list="topicList" :current="activeTopicIndex" @click="onTabChange" key-name="title" line-color="#04BABE" :activeStyle="{ color: '#1b1b1b', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{ color: '#1b1c1c', fontSize: '14px'}"></uv-tabs>
			<swiper class="lists" :current="activeTopicIndex" :duration="300" @change="onSwiperChange">
				<swiper-item class="swiper-item" v-for="(item, index) in topicList" :key="index">
					<promptList :topic-id="item.id" :topic-index="index" :active-topic-index="activeTopicIndex"></promptList>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				topicList: [
					{
						id: 'vote',
						title: '收藏'
					},
					{
						id: 'all',
						title: '全部'
					}
				],
				searchTabs: [
					{id: 'search',title: '搜索结果'},
				],
				isSearch: false,
				keyword: '',
				activeTopicIndex: 1
			};
		},
		onLoad() {
			this.getTopicList()
			app.globalData.util.getSetting().then(setting => {})
		},
		onShow(options) {
			uni.setNavigationBarTitle({
				title: this.$lang('创作中心')
			})
		},
		methods: {
			onTabChange: function(item) {
				const topic_id = item.id
				this.setData({
					activeTopicId: topic_id,
					activeTopicIndex: item.index
				})
			},
			onSwiperChange(e) {
				let index = e.target.current || e.detail.current
				this.activeTopicIndex = index
			},
			getTopicList() {
				app.globalData.util.request({
						url: '/write/getTopicList'
					})
					.then((res) => {
						if (res.data && res.data.length > 0) {
							this.topicList = this.topicList.concat(res.data)
						}
					});
			},
			keywordInputChange(e) {
				let value = e.detail.value
				this.keyword = value
			},
			clearKeyword() {
				if (this.$refs['search']) {
					this.$refs['search'].clearList();
				}
				this.keyword = '';
				this.isSearch = false;
			},
			doSearch() {
				const keyword = this.keyword
				if (keyword) {
					this.isSearch = true
					setTimeout(() => {
						this.$refs['search'].getPrompts(keyword)
					}, 50)
				} else {
					this.clearKeyword()
				}
			}
		}
	};
</script>
<style lang="scss">
	.page {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;
		
		.search {
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    padding: 30rpx 30rpx 10rpx 30rpx;
		    box-sizing: border-box;
			.ic_search {
			    width: 32rpx;
			    height: 32rpx;
			    position: absolute;
			    left: 56rpx;
			    top: 52rpx;
			}
			.ic_clear {
			    position: absolute;
			    right: 44rpx;
			    top: 30rpx;
			    width: 72rpx;
			    height: 72rpx;
			    display: flex;
			    align-items: center;
			    justify-content: center;
				image {
				    width: 32rpx;
				    height: 32rpx;
				}
			}
			input {
			    width: 100%;
			    height: 72rpx;
			    line-height: 72rpx;
			    background: #fff;
			    color: #1f1f1f;
			    border-radius: 44rpx;
			    padding-left: 68rpx;
			    padding-right: 80rpx;
			    box-sizing: border-box;
			    font-size: 26rpx;
			}
		}
		
	
		.tabs {
			position: absolute;
			top: 120rpx;
			left: 0;
			width: 100%;
			height: 88rpx;
			padding-left: 12rpx;
			box-sizing: border-box;
		}
	
		.lists {
			position: absolute;
			left: 0;
			right: 0;
			top: 200rpx;
			bottom: 0;
			width: 100%;
			height: auto;
		}
	}
</style>